<template>
    <div>
		<Row :gutter="24" style="margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
				    <div ref="twoLevelOrg" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 5px;">
			<Col span="12">
				<Card dis-hover>
				    <div ref="pieInjuryLevel" style="height: 300px;"></div>
				</Card>
			</Col>
			<Col span="12">
				<Card dis-hover>
					<div ref="pieAccType" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 5px;">
			<Col span="24">
				<Card dis-hover>
					<div ref="twoLevelOrgOld" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		<Row :gutter="24" style="margin-top: 5px;">
			<Col span="12">
				<Card dis-hover>
				    <div ref="levelInjury" style="height: 300px;"></div>
				</Card>
			</Col>
			<Col span="12">
				<Card dis-hover>
					<div ref="twoLevelMoney" style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>
		
        <Modal title="安全事故详情" :transfer=false v-model="model1" :width=1200 footer-hide>
            <Table ref='table' :loading="loading" size="small" class="table" :height=500 no-data-text="没有查询到相关数据!"
                   highlight-row stripe border :columns="columns1" width="100%" :data="detailData">
            </Table>
             <Page :total="pagedata.total" :current="pagedata.fromPage" :pageSize="pagedata.pageSize"
              @on-change="pageChange" @on-page-size-change='sizeChange' show-total show-sizer show-elevator/>
        </Modal>
    </div>
</template>
<script>
    import {Api} from '@/api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '../../../../common/cacheUtils.js';
    import echarts from 'echarts'

    var cascaderDom = () => import('@/components/cascader-dom.vue');
    export default {
        components:{cascaderDom},
        data() {
            return{
                ...this.createCommonDataField(),
                // 切换标签
				currentPosition:"",
				currentType:"",
                // api
				loading:false,
				detailData:[],
				pageSizeArray: [10, 20, 50],
				pagedata: {
					total: 0,
					pageSize: 10,
					fromPage: 1,
				},
				model1:false,
				columns1:[
					{
						title: "序号",
						width: 80,
						align: "center",
						fixed: 'left',
						render: (h, params) => {
							return h('span', params.index + (this.pagedata.fromPage - 1) * this.pagedata.pageSize + 1);
						}		
					},
					{
						title: '伤亡人员姓名',
						align: 'center',
						key: 'victim',
						minWidth: 150,
					},
					{
						title: '伤害程度',
						align: 'center',
						key: 'injuryLevelName',
						minWidth: 200,
					},
					{
						title: '歇工天数',
						align: 'center',
						key: 'daysWork',
						minWidth: 150,
					},
					{
						title: '直接经济损失(万元)',
						align: 'center',
						key: 'loseMoney',
						minWidth: 150,
					},
					{
						title: '工种或岗位',
						align: 'center',
						key: 'position',
						minWidth: 150,
					},
					{
						title: '事故时间',
						align: 'center',
						key: 'sartDateStr',
						minWidth: 150,
					},
					{
						title: '事故类别',
						align: 'center',
						key: 'accTypeName',
						minWidth: 150,
					},
					{
						title: '就业类型',
						align: 'center',
						key: 'membershipName',
						minWidth: 150,
					},
					{
						title: '上报单位',
						align: 'center',
						key: 'orgName',
						minWidth: 300,
						ellipsis: true
					},
				],
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                queryUrl: Api.getEchatBriefing+'/new',
                twoLevelOrgOldList:[]
            }
        },
        mounted(){
            this.year = new Date().getFullYear()
			this.query();
        },
        methods: {
            ...pageCommonFunction,
            setCompanyName(data) {
                this.$set(this.dataToQuery, 'companyName', data)
            },
            setCompanyId(data) {
                if (data && data instanceof Array && data.length > 0) {
                    this.dataToQuery.companyId = data[data.length - 1];
                } else {
                    this.dataToQuery.companyId = null;
                }
            },
            query() {
                let twoLevelOrgChart = echarts.init(this.$refs.twoLevelOrg);
                let pieAccTypeChart = echarts.init(this.$refs.pieAccType);
                let pieInjuryLevelChart = echarts.init(this.$refs.pieInjuryLevel);

                let barTwoLevelOrgOldChart = echarts.init(this.$refs.twoLevelOrgOld);
                let barLevelInjuryChart = echarts.init(this.$refs.levelInjury);
                let barTwoLevelMoneyChart = echarts.init(this.$refs.twoLevelMoney);

                this.$http.get(this.queryUrl).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    let map = res.data.data;

                    let twoLevelOrgOption = this.getTwoLevelOrgOption();
                    twoLevelOrgOption.series[0].data = map.twoLevelOrgMap.qings
                    twoLevelOrgOption.series[1].data = map.twoLevelOrgMap.zhongs
                    twoLevelOrgOption.series[2].data = map.twoLevelOrgMap.deads
                    twoLevelOrgOption.xAxis[0].data = map.twoLevelOrgMap.orgNames
                    twoLevelOrgChart.setOption(twoLevelOrgOption);
                    window.onresize = twoLevelOrgChart.resize;

                    let pieAccTypeOption = this.getPieAccTypeOption();
                    pieAccTypeOption.series[0].data = map.pieAccTypeList;
                    pieAccTypeChart.setOption(pieAccTypeOption);
                    window.onresize = pieAccTypeChart.resize;

                    let pieInjuryLevelOption =  this.getPieInjuryLevelOption();
                    pieInjuryLevelOption.series[0].data = map.pieInjuryLevelList;
                    pieInjuryLevelChart.setOption(pieInjuryLevelOption);
                    window.onresize = pieInjuryLevelChart.resize;



                    let barLevelInjuryOption =  this.getBarLevelInjuryOption();
                    barLevelInjuryOption.series[0].data = map.levelInjuryMap.qings
                    barLevelInjuryOption.series[1].data = map.levelInjuryMap.zhongs
                    barLevelInjuryOption.series[2].data = map.levelInjuryMap.deads
                    barLevelInjuryOption.xAxis[0].data = map.levelInjuryMap.years
                    barLevelInjuryChart.setOption(barLevelInjuryOption);
                    window.onresize = barLevelInjuryChart.resize;

                    let barTwoLevelMoneyOption =  this.getBarTwoLevelMoneyOption();
                    barTwoLevelMoneyOption.series[0].data = map.twoLevelOrgMap.dayWorks
                    barTwoLevelMoneyOption.series[1].data = map.twoLevelOrgMap.loseMoneys
                    barTwoLevelMoneyOption.xAxis[0].data = map.twoLevelOrgMap.orgNames
                    barTwoLevelMoneyChart.setOption(barTwoLevelMoneyOption);
                    window.onresize = barTwoLevelMoneyChart.resize;


                    this.twoLevelOrgOldList = map.twoLevelOrgOldList
                    let barTwoLevelOrgOldOption =  this.getBarTwoLevelOrgOldOption();
                    barTwoLevelOrgOldChart.setOption(barTwoLevelOrgOldOption);
                    window.onresize = barTwoLevelOrgOldChart.resize;

                }).catch(e => {
                    this.$Message.error("数据获取失败")
                })
            },


            getTwoLevelOrgOption(){
                let option = {
                    title: {
                        text: '二级集团'+this.year+'年事故伤亡程度人数统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {	//提示框组件
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {	//图例组件
                        right: 18,
                        data: ['轻伤人数', '重伤人数','死亡人数']
                    },
                    color:[ '#40C4FF','#FDD835', '#FF3E80'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '1%',
                        containLabel: true,
                    },
                    // dataZoom: [{
                    //     type: 'inside'
                    // }, {
                    //     type: 'slider',
                    //     textStyle:false
                    // }],
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisLabel: {
                                interval: 0,
                                formatter:function(value){
                                    var str = "";
                                    var num = 6; //每行显示字数
                                    var valLength = value.length; //该项x轴字数
                                    var rowNum = Math.ceil(valLength / num); // 行数
                                    if(rowNum > 1) {
                                        for(var i = 0; i < rowNum; i++) {
                                            var temp = "";
                                            var start = i * num;
                                            var end = start + num;
                                            temp = value.substring(start, end) + "\n";
                                            str += temp;
                                        }
                                        return str;
                                    } else {
                                        return value;
                                    }
                                }
                            }
                        }
                    ],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: '轻伤人数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            // label: {
                            //     show: true
                            // },
                            data: []
                        },
                        {
                            name: '重伤人数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        },
                        {
                            name: '死亡人数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: []
                        }
                    ]
                };
                return option;
            },
            getPieInjuryLevelOption(){
                let option = {
                    title: {
                        text: '集团'+this.year+'年事故伤害程度人数统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 15,
                        top:'center',
                        data: ['轻伤人数', '重伤人数', '亡人人数']
                    },
                    color:['#42A5F5', '#FFC310','#FF3E80'],
                    series: [
                        {
                            // name: '事故人数',
                            type: 'pie',
                            // radius: '60%',
                            radius: ['50%', '70%'],
                            center: ['45%', '50%'],
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                formatter: '{@2012}' // ({d}%)
                            },
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option;
            },
            getPieAccTypeOption(){
                let option = {
                    title: {
                        text: '集团'+this.year+'年事故数量统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 15,
                        top:'center',
                    },
                    color:['#42A5F5', '#FF3E80', '#FFC310', '#1DE9B6','#FD5C50','#FF9800','#92ffd0'],
                    series: [
                        {
                            name: '事故数量',
                            type: 'pie',
                            radius: ['20%', '70%'],
                            center: ['40%', '50%'],
                            label: {
                                formatter: '{@2012}'
                            },
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option;
            },
            getBarTwoLevelOrgOldOption(){
                let option = {
                    title: [
                        {
							text: '二级集团历年事故伤害程度人数统计',
							textStyle: {fontSize: 14}
                    	},
                        {
                            subtext:this.twoLevelOrgOldList && (this.twoLevelOrgOldList[2].year+'年'),
                            left: '16.67%',
                            bottom: '2%',
                            textAlign: 'center'
                        },
                        {
                            subtext: this.twoLevelOrgOldList && (this.twoLevelOrgOldList[1].year+'年'),
                            left: '50%',
                            bottom: '2%',
                            textAlign: 'center'
                        },
                        {
                            subtext: this.twoLevelOrgOldList && (this.twoLevelOrgOldList[0].year+'年'),
                            left: '83.67%',
                            bottom: '2%',
                            textAlign: 'center'
                        },
					],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {	//图例组件
                        right: 15,
                        data: ['轻伤人数','重伤人数','死亡人数']
                    },
                    color:['#40C4FF','#FDD835','#FF3E80'],
                    grid: [
                        {left: '2%', width: '32%', bottom: '8%', containLabel: true},
                        {left: '35%', width: '32%', bottom: '8%', containLabel: true},
                        {left: '68%', width: '32%', bottom: '8%', containLabel: true},
					],
                    xAxis: [
                        {
                            gridIndex: 0,
							type: 'value',
							splitLine:{show: false},
							axisTick:{show:false},
							axisLine:{show:false},
							axisLabel: {show:false},
						},
                        {
                            gridIndex: 1,
                            type: 'value',
                            splitLine:{show: false},
                            axisTick:{show:false},
                            axisLine:{show:false},
                            axisLabel: {show:false},
                        },
                        {
                            gridIndex: 2,
                            type: 'value',
                            splitLine:{show: false},
                            axisTick:{show:false},
                            axisLine:{show:false},
                            axisLabel: {show:false},
                        },
					],
                    yAxis: [
                        {
                            gridIndex: 0,
							type: 'category',
							splitLine:{show: false},
							axisTick:{show:false},
							axisLine:{show:false},
							data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[2].orgNames
						},
                        {
                            gridIndex: 1,
                            type: 'category',
                            splitLine:{show: false},
                            axisTick:{show:false},
                            axisLine:{show:false},
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[1].orgNames
                        },
                        {
                            gridIndex: 2,
                            type: 'category',
                            splitLine:{show: false},
                            axisTick:{show:false},
                            axisLine:{show:false},
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[0].orgNames
                        },
					],
                    series: [
                        {
                            name: '轻伤人数',
                            type: 'bar',
                            stack: 'total',
                            // label: {show: true},
                            xAxisIndex: 0,
							yAxisIndex: 0,
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[2].qings
                        },
                        {
                            name: '重伤人数',
                            type: 'bar',
                            stack: 'total',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            // label: {show: true},
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[2].zhongs
                        },
                        {
                            name: '死亡人数',
                            type: 'bar',
                            stack: 'total',
                            xAxisIndex: 0,
                            yAxisIndex: 0,
                            // label: {show: true},
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[2].deads
                        },
                        {
                            name: '轻伤人数',
                            type: 'bar',
                            stack: 'total1',
                            // label: {show: true},
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[1].qings
                        },
                        {
                            name: '重伤人数',
                            type: 'bar',
                            stack: 'total1',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            // label: {show: true},
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[1].zhongs
                        },
                        {
                            name: '死亡人数',
                            type: 'bar',
                            stack: 'total1',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            // label: {show: true},
                            emphasis: {
                                focus: 'series'
                            },
                            data:this.twoLevelOrgOldList && this.twoLevelOrgOldList[1].deads
                        },
                        {
                            name: '轻伤人数',
                            type: 'bar',
                            stack: 'total2',
                            // label: {show: true},
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[0].qings
                        },
                        {
                            name: '重伤人数',
                            type: 'bar',
                            stack: 'total2',
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            // label: {show: true},
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[0].zhongs
                        },
                        {
                            name: '死亡人数',
                            type: 'bar',
                            stack: 'total2',
                            xAxisIndex: 2,
                            yAxisIndex: 2,
                            // label: {show: true},
                            emphasis: {
                                focus: 'series'
                            },
                            data: this.twoLevelOrgOldList && this.twoLevelOrgOldList[0].deads
                        },

                    ]
                };
                return option;
			},
            getBarLevelInjuryOption(){
                let option = {
                    title: {
                        text: '集团历年事故伤害程度人数统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {	//提示框组件
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {	//图例组件
                        right: 15,
                        data: ['轻伤人数','重伤人数','死亡人数']
                    },
                    color:['#40C4FF','#FDD835','#FF3E80'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],//动态
                        }
                    ],
                    yAxis: [{type: 'value'}],
                    series: [
                        {
                            name: '轻伤人数',
                            type: 'line',
                            smooth: true,
                            data: [] //动态
                        },
                        {
                            name: '重伤人数',
                            type: 'line',
                            smooth: true,
                            data: []
                        },
                        {
                            name: '死亡人数',
                            type: 'line',
                            smooth: true,
                            data: []
                        }
                    ]
                };
                return option;
			},
            getBarTwoLevelMoneyOption(){
                let option = {
                    title: {
                        text: '二级集团'+this.year+'年事故经济损失和歇工天数统计',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {	//提示框组件
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {	//图例组件
                        right: 15,
                        data: ['歇工天数','经济损失']
                    },
                    color:['#40C4FF','#FDD835'],
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],//动态
                            axisLabel: {
                                interval: 0,
                                rotate: 25,
                                fontSize: 12,
                                // color: '#4FC3F7',
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            // name: '歇工天数',
                            min: 0,
                            // max: 500,
                            minInterval:1,
                            axisLabel: {
                                formatter: '{value} 天'
                            }
                        },
                        {
                            type: 'value',
                            // name: '经济损失',
                            min: 0,
                            // max: 1000,
                            // interval: 100,
                            axisLabel: {
                                formatter: '{value} 万元'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '歇工天数',
                            type: 'bar',
                            emphasis: {
                                focus: 'series'
                            },
                            data: [] //动态
                        },
                        {
                            name: '经济损失',
                            type: 'line',
                            yAxisIndex: 1,
                            smooth: true,
                            data: []
                        }
                    ]
                };
                return option;
            },
			sizeChange(size) {
                this.pagedata.pageSize = size
                this.pagedata.fromPage = 1
                this.queryDetail(this.currentPosition,this.currentType)
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.queryDetail(this.currentPosition,this.currentType)
            },
			queryDetail(position,type){
				this.currentPosition = position;
				this.currentType = type;
				this.loading = true;
				this.model1 = true;
				var orgId = "";
				if(this.dataToQuery.companyId != ""&& this.dataToQuery.companyId != undefined){
					orgId = this.dataToQuery.companyId
				}
				else{
					orgId = sessionStorage('userId').getObject('userId').companyId;
				}
				let data = {
					startPage: this.pagedata.fromPage,
					size: this.pagedata.pageSize,
					orgId: orgId
				};
				if(type == "经济损失")
					data.type = "0";
				else if(type == "重伤人数"){
					data.type = "1";
					data.injuryLevels = "1000001019000000002"
				}
				else if(type == "死亡人数"){
					data.type = "2";
					data.injuryLevels = "1000001019000000003"
				}
				data.position = position;	
				let url = Api.briefing
				this.$http.get(url, {params: data}).then((res) => {
					this.detailData = res.data.data.data;
					this.pagedata.total = res.data.data.totalSize;
					this.loading = false;
				}).catch(e => {
					this.$Message.error("数据获取失败")
				})
			}
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
</style>
